<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务中心 - 宠物家政服务</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/home.css"> <!-- 复用home.css中的服务卡片样式 -->
    <style>
        .services-section {
            padding-top: 50px;
            padding-bottom: 50px;
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <i class="fas fa-paw"></i>
                <span>宠物家政</span>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-link">首页</a>
                <a href="services.html" class="nav-link active">服务预约</a>
                <a href="orders.html" class="nav-link">我的订单</a>
                <a href="profile.html" class="nav-link">个人中心</a>
            </nav>
            <div class="user-actions">
                <a href="pets.html" class="nav-link">
                    <i class="fas fa-dog"></i> 我的宠物
                </a>
                <span class="user-name">张三</span>
            </div>
        </div>
    </header>

    <main class="main">
        <section class="services-section">
            <div class="container">
                <h2 class="section-title">我们的服务</h2>
                <div class="services-grid">
                    <!-- 服务列表将由JavaScript动态加载 -->
                </div>
            </div>
        </section>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
    <script src="js/api.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const serviceUrlMap = {
                '宠物日常护理': 'service-daily.html',
                '宠物美容': 'service-grooming.html',
                '宠物训练': 'service-training.html',
                '宠物寄养': 'service-boarding.html',
                '宠物医疗': 'service-medical.html',
                '宠物用品代购': 'service-shopping.html',
            };
            const serviceIconMap = {
                '宠物日常护理': 'fas fa-bath',
                '宠物美容': 'fas fa-cut',
                '宠物训练': 'fas fa-graduation-cap',
                '宠物寄养': 'fas fa-home',
                '宠物医疗': 'fas fa-heartbeat',
                '宠物用品代购': 'fas fa-shopping-cart'
            };

            async function renderServices() {
                const servicesGrid = document.querySelector('.services-grid');
                if (!servicesGrid) {
                    return;
                }

                try {
                    const response = await petHouseAPI.services.getAll();
                    const services = response.data;
                    
                    if (!services || !Array.isArray(services) || services.length === 0) {
                        servicesGrid.innerHTML = '<p>暂无服务项目。</p>';
                        return;
                    }

                    servicesGrid.innerHTML = '';

                    services.forEach(service => {
                        // 打印服务名称，方便调试
                        console.log(`从后端获取的服务: name='${service.name}', id=${service.id}`);
                        const card = document.createElement('div');
                        card.className = 'service-card';
                        const url = serviceUrlMap[service.name] || 'services.html';
                        card.setAttribute('onclick', `location.href='${url}'`);
                        let priceDisplay = `¥${service.basePrice}起`;
                        if (service.name === '宠物用品代购') {
                            priceDisplay = '免费代购';
                        } else if (service.name === '宠物寄养') {
                            priceDisplay = `¥${service.basePrice}/天`;
                        }
                        const iconClass = serviceIconMap[service.name] || service.logo || 'fas fa-paw';
                        card.innerHTML = `
                            <div class="service-icon">
                                <i class="${iconClass}"></i>
                            </div>
                            <h3>${service.name}</h3>
                            <p>${service.description}</p>
                            <div class="service-price">${priceDisplay}</div>
                        `;
                        servicesGrid.appendChild(card);
                    });
                } catch (error) {
                    console.error('无法加载服务项目:', error);
                    servicesGrid.innerHTML = '<p>服务项目加载失败，请稍后重试。</p>';
                }
            }

            renderServices();
        });
    </script>
</body>
</html> 